<template>
    <oa-tab-page title="消息">
        <div>
            <oa-notice-item @click="selectItem(item,index)" :selected="item.isCheck" :showDelete="isEdit"
                            v-for="(item,index) in notices"
                            :title="item.message"
                            :time="item.time"
                            :key="index"/>
        </div>
    </oa-tab-page>
</template>

<script>
    import OaPage from "../components/oa-page";
    import OaNoticeItem from "../components/oa-notice-item";
    import OaTabPage from "../components/oa-tab-page";
    import OaTopBar from "../components/oa-top-bar";

    export default {
        components: {
            OaTopBar,
            OaTabPage,
            OaNoticeItem,
            OaPage
        },
        name: "notice",
        data() {
            return {
                isEdit: false,
                buttons: [
                    {
                        icon: 'icon-edit'
                    }
                ],
                selected: new Map()
            }
        },
        computed: {
            notices() {
                return this.$store.state.notices
            }
        },
        beforeRouteEnter(to, from, next) {
            next(vm => {
                // 通过 `vm` 访问组件实例
                let notices = vm.$store.state.notices
                notices.map((item) => {
                    item.is_read = true
                })
                vm.$store.commit("updateNew", {is_new_message: false})
                window.localStorage.setItem("notices", JSON.stringify(notices));
                vm.$store.commit("updateMessage", {notices: notices})
            })
        },

        mounted() {

        },
        methods: {

            rightClick(item, index) {
                if (item.icon == 'icon-edit') {
                    this.isEdit = !this.isEdit
                    if (this.isEdit) {
                        this.buttons.unshift({
                            icon: 'icon-delete'
                        })
                    } else {
                        this.buttons.shift()
                    }
                } else {
                    this.deleteSelectd()
                }
            },
            selectItem(item, index) {

            },
            deleteSelectd() {
                let notices = this.$store.state.notices;
                if (index > -1) {
                    notices.splice(index, 1);
                }
                this.$store.commit("updateMessage", {notices: notices})
            }
        }
    }
</script>

<style scoped>

</style>